﻿<template>

  <div  v-loading="loadingState.configLoading||loadingState.fieldLoading||loadingState.unitLoading" style="padding-top: 20px;">

    <el-form :model="keyItemConfig">
      <el-form-item label="税前内部收益率" :label-width="formLabelWidth">
        <el-cascader :props="{emitPath: false}"
                     :options="computeUnitList"
                     filterable
                     v-model="keyItemConfig.irrBeforeTax" :disabled="!modelEditable"></el-cascader>
      </el-form-item>
      <el-form-item label="税后内部收益率"
                    :label-width="formLabelWidth">
        <el-cascader :props="{emitPath: false}"
                     :options="computeUnitList"
                     filterable
                     v-model="keyItemConfig.irrAfterTax" :disabled="!modelEditable"></el-cascader>
      </el-form-item>
      <el-form-item label="税前投资回收期"
                    :label-width="formLabelWidth">
        <el-cascader :props="{emitPath: false}"
                     :options="computeUnitList"
                     filterable
                     v-model="keyItemConfig.pbpBeforeTax" :disabled="!modelEditable"></el-cascader>
      </el-form-item>
      <el-form-item label="税后投资回收期"
                    :label-width="formLabelWidth">
        <el-cascader :props="{emitPath: false}"
                     :options="computeUnitList"
                     filterable
                     v-model="keyItemConfig.pbpAfterTax" :disabled="!modelEditable"></el-cascader>
      </el-form-item>

        <el-form-item label="税前财务净现值"
                      :label-width="formLabelWidth">
          <el-cascader :props="{emitPath: false}"
                       :options="computeUnitList"
                       filterable
                       v-model="keyItemConfig.npvBeforeTax"
                       :disabled="!modelEditable"></el-cascader>
        </el-form-item>
      <el-form-item label="税后财务净现值"
                    :label-width="formLabelWidth">
        <el-cascader
            :options="computeUnitList"
                     filterable
                    :props="{emitPath: false}"
                     v-model="keyItemConfig.npvAfterTax"
                     :disabled="!modelEditable"></el-cascader>
      </el-form-item>
     
      <el-form-item label=""
                    :label-width="formLabelWidth">
<!--        <el-button @click="configDlgVisible = false">取 消</el-button>-->
        <el-button v-if="modelEditable" type="primary" @click="updateConfig">保 存</el-button>

      </el-form-item>
    </el-form>


  </div>

</template>

<script>

export default {
  name: "KeyItemModule",
  $$route: {
    path: 'key-item-module',
    parentName: 'ModelInfo',
  },
  props: {
    modelInfo: {}
  },
  data() {
    return {
      loadingState:{
        fieldLoading:false,
        unitLoading:false,
        configLoading:false,
      },
      isLoading: false,
      formLabelWidth: '120px',
      sensAnalysisItem: {fieldIdList: []},
      itemList: [],
      itemDlgVisible: false,
      editItemMode: false,
      // inputTableList: [],
      modelEditable: false,
      recordFieldCascaderProps: {
        label: 'name',
        value: 'id',
        emitPath: false,
        children: 'fieldList',
        multiple: true,
      },
      singleRecordFieldCascaderProps: {
        label: 'name',
        value: 'id',
        emitPath: false,
        children: 'fieldList',
        multiple: false,
      },
      configDlgVisible: false,
      computeUnitList: [],
      computeUnitList: [],
      keyItemConfig: {changeStep: 10, computeUnitRefList: []},
      showSheetIcon: false,
    }
  },
  computed: {
    showSelectIconProp: function () {
      if (this.configDlgVisible == false) {
        this.showSheetIcon = false;
      }
      return this.configDlgVisible && this.showSheetIcon;
    }
  },
  created: function () {
    // const modelId = this.$route.params.id;
    const modelId = this.modelInfo.id;
    // this.loadModelInfo(modelId);
    this.modelEditable = this.modelInfo.state != 'publish';
    // this.loadInputTableList(this.modelInfo.id);
    this.loadComputeUnitList(modelId);
    this.loadConfig(modelId);
  },
  methods: {
    // loadModelInfo: function (modelId) {
    //     this.$get("/model/" + modelId, {}, (response) => {
    //         this.modelInfo = response.data;
    //         this.modelEditable = this.modelInfo.state == 0;
    //         this.loadInputTableList(this.modelInfo.id);
    //     });
    // },
    loadInputTableList: function (modelId) {
      this.loadingState.fieldLoading = true;
      this.$get("/table/fulldata?modelId=" + modelId, {}, (response) => {
        this.inputTableList = response.data;
      }, () => {
        this.loadingState.fieldLoading = false;
      });
    },

    parseUnitList2OptionList(dataList) {
      var dataMap = {};
      for (var i = 0; i < dataList.length; i++) {
        var item = dataList[i];
        // this.computeUnitMap[item.ref] = item;
        var list = dataMap[item.tag];
        if (!list) {
          list = [];
          dataMap[item.tag] = list;
        }
        list.push(item);
      }
      var resultList = [];
      for (var key in dataMap) {
        var list = dataMap[key];
        var item = {label: key, value: key, children: []};
        for (var i = 0; i < list.length; i++) {
          item.children.push({label: list[i].name, value: list[i].ref});
        }
        resultList.push(item);
      }
      return resultList;
    },
    loadComputeUnitList: function (id) {
      this.loadingState.unitLoading = true;
      this.$get("/compute/data", {
        modelId: id, type: 'field,input,expression,compute,summary'
      }, (response) => {

        var computeList = [];
        var normalList = [];
        var normalList2 = [];
        for (var item of response.data) {
          if (item.type == 'compute') {
            computeList.push(item);
          }
        }


        this.computeUnitList = this.parseUnitList2OptionList(computeList);

      },(response)=>{
        this.loadingState.unitLoading = false;
      });

    },

    updateConfig: function () {
      this.loadingState.configLoading = true;
      this.keyItemConfig.modelId = this.modelInfo.id;
      this.$post("/key_item_config/update", this.keyItemConfig, (response) => {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.configDlgVisible = false;
      },(response)=>{
        this.loadingState.configLoading = false;
      });
    },
    loadConfig: function (modelId) {
      this.loadingState.configLoading = true;
      this.$get("/key_item_config/data", {modelId: modelId}, (response) => {
        if (response.data) {
          this.keyItemConfig = response.data;
        }
      },(response)=>{
        this.loadingState.configLoading = false;
      });
    },
  },

}
</script>

